<template>
  <!-- 左边公共的部分 -->

  <div class="left">
    <!-- 个人展示区域 -->
    <div class="show panel">
      <img src="/images/jiecheng.jpg" alt="">
      <p>jiecheng</p>
      <p><span>中国</span><span>江西</span><span>新余</span></p>
    </div>

    <!-- 网站数据统计 -->
    <div class="stat panel">
      <div class="title"><i class="jcfont jctongji"></i>网站数据统计</div>
      <ul>
      	<li v-for="(item,index) in statLis" :key="index">
          <div class="li-left">
            <i :class="`jcfont ${item.icon}`" :style="{color:item.color}"></i>
            {{ item.name }}
          </div>
          <div class="li-right">{{ item.count }}</div>
        </li>
      </ul>
    </div>

    <!-- 访客 -->
    <div class="visitor panel">
      <div class="title"><i class="jcfont jcfangkeshu"></i>最近访客</div>
      <ul>
      	<li v-for="p in 9">
          <nuxt-link class="img" to="/"><img :src="'/images/avatar-0'+p+'.jpg'" alt=""></nuxt-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    layout: 'left',
    data(){
      return {
        statLis: [
          {
            icon:'jc16',
            name: '文章总数',
            count: '2000',
            color: 'rgba(238, 147, 159, 1.0)'
          },
          {
            icon:'jcfenlei-copy',
            name: '分类总数',
            count: '2000',
            color: 'rgba(106, 50, 174, 0.5)'
          },
          {
            icon:'jcliuyan2',
            name: '留言总数',
            count: '2000',
            color: 'rgba(41, 174, 119, 1.0)'
          },
          {
            icon:'jclianjie',
            name: '友链总数',
            count: '2000',
            color: 'rgba(152, 174, 54, 1.0)'
          },
          {
            icon:'jcchakan',
            name: '访问总数',
            count: '2000',
            color: 'rgba(174, 97, 33, 1.0)'
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
  // 面板样式
  .panel{
    @include panel;
    .title{
      font-size: 12px;
      line-height: 30px;
      border-bottom: 1px solid #eee;
      i{
        font-size: 14px;
        margin-right: 10px;
        color: $primary-color;
      }
    }
  }
  .left{
    // 个人展示
    .show{
      text-align: center;
      padding-top: 45px;
      padding-bottom: 25px;
      img{
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
      p{
        margin-top: 5px;
        span{
          padding:0 5px;
          border-left: 1px solid #eee;
          font-size: 12px;
          &:first-child{
            border-left: none;
          }
        }
      }
    }
    //网站数据统计
    .stat{
      >ul{
        font-size: 12px;
        padding-top: 6px;
        >li{
          padding-top: 6px;
          padding-bottom: 6px;
          @include flex;
          justify-content: space-between;
          i{
            margin-right: 10px;
          }
          .li-left{
            @include flex;
          }
          .li-right{}
        }
      }
    }
    //访客
    .visitor{
      ul{
        display: flex;
        flex-wrap: wrap;
        padding-top: 10px;
        li{
          width: 33%;
          padding: 5px;
          box-sizing: border-box;
          text-align: center;
          borde-radius: 10px;
          overflow: hidden;
          img{
            width: 100%;
            max-width: 60px;
            border-radius: 50%;
          }
        }
      }
    }
  }
</style>
